<template>
	<view class="content">
		<!-- <unicloud-db ref="jsq" v-slot:default="{data, pagination,loading, error, options}" collection="jishuqi_list"
			:where="user_ids">
			<view v-if="error">{{error.message}}</view>
			<view v-else> -->
				<view class="ul">
					<view class="li" v-for="item,index in datalist" :key="index">
						<view class="le" @click="click_one(index)">
							<view class="title">{{item.tit}}</view>
							<view class="num">{{item.num}}</view>
						</view>
						<view class="ri">
							<text @click="add_li">加</text>
							<text @click="set_li(item)">改</text>
							<text @click="fongda(item._id)">展</text>
							<text v-if="index>0" @click="del_list(item._id)">删</text>
						</view>
					</view>
				</view>
			<!-- </view> -->
		<!-- </unicloud-db> -->
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view>
					<view>
						<uni-row style="display: flex;align-items: center;">
							<uni-col :span="8">标题</uni-col>
							<uni-col :span="16"><input class="uni-input" v-model="content" focus
									placeholder="请输入标题" /></uni-col>
						</uni-row>
					</view>
					<view style="margin-top: 15px;">
						<uni-row style="display: flex;align-items: center;margin-top:30rpx;">
							<uni-col :span="8">初始值</uni-col>
							<uni-col :span="16"><input class="uni-input" type="number" v-model="num"
									placeholder="请输入标题" /></uni-col>
						</uni-row>
					</view>
				</view>

				<view class="btn">
					<button class="le" @click="close">取消</button>
					<button class="ri" @click="click_true">确定</button>
				</view>
			</view>
		</uni-popup>

		<view class="add_float" @click="add_li">
			+
		</view>

	</view>
</template>

<script>
	import {
		gaoxiao_vido
	} from '@/api/index.js'
	export default {
		data() {
			return {
				datalist: [],
				id: '',
				content: '',
				num: 0,
				show: false,
				title: '',
				list_num: [{
					title: "加1",
					num: 0
				}],
				indexs: 0,
				is_set: false,
				user_ids: '',
				user_id: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.get_list()
			
		},
		mounted() {

		},
		onReady() {
			this.user_id = uni.getStorageSync('user')._wxopenid
			this.user_ids = "user_id=='" + uni.getStorageSync('user')._wxopenid + "'";
			
			if (this.user_ids) {
				this.get_list()
			}
		},
		onPullDownRefresh() {
			this.get_list()
			uni.stopPullDownRefresh()
		},
		methods: {
			set_li(item) {
				this.id = item._id
				this.content = item.tit
				this.num = item.num
				this.$refs.popup.open('center')
			},
			get_list() {
				uni.showLoading({
					title: '加载中'
				});
				const db = uniCloud.database();
				db.collection('jishuqi_list').where({
					user_id:this.user_id
				}).get().then(res=>{
					console.log(res)
					this.datalist=res.result.data
				})
				uni.hideLoading();
			},
			fongda(id) {
				uni.navigateTo({
					url: '../num_more/num_more?id=' + id,
				})
			},
			del_list(id) {
				var that=this
				uni.showModal({
					title: '警告!',
					content: '您正在清除此数据!',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const db = uniCloud.database();
							// db.collection('user-list').doc(id).remove();
						  db.collection('jishuqi_list').where({
							 _id:id
							}).remove().then(res=>{
								that.get_list()
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// this.$refs.jsq.remove(id)
			},
			click_true() {
				if (!this.id) {
					let obj = {
						tit: this.content,
						num: this.num,
						user_id: this.user_id
					}
					const db = uniCloud.database()
					db.collection('jishuqi_list')
						.add(obj)
						.then((res) => {
							console.log(res)
							if (res.errCode == 0) {
								this.$refs.popup.close()
								this.get_list()
							}
						})
						.catch((err) => {

						})


				} else {
					const db = uniCloud.database();
					console.log(this.id)
					let obj = {
						_id: this.id,
						tit: this.content,
						num: this.num,
						user_id: this.user_id
					}
					delete obj._id
					db.collection('jishuqi_list').doc(this.id).update(obj).then(res => {
						console.log(res)
						if (res.result.errCode == 0) {
							this.$refs.popup.close()
							this.get_list()
						}
					})
				}

			},
			close() {
				this.is_set = false
				this.$refs.popup.close()
			},
			click_one(index) {
				console.log(index)
				this.list_num[index].num += 1
				uni.setStorageSync('LIST_INDEX', this.list_num)
			},
			add_li() {
				this.$refs.popup.open('center')

			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 25rpx;
		box-sizing: border-box;
	}

	.ul {
		width: 100%;
		height: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.ul .li {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		background-color: #ff8272;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: space-between;
		border: 4px solid #ff8272;
		/* box-sizing: border-box; */
	}

	.ul .li .le {
		width: 50%;
		text-align: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}

	.ul .li .le .title {
		width: 30%;
		text-align: center;
		font-size: 32rpx;
		color: #ffffff;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.ul .li .le .num {
		width: 70%;
		font-size: 50rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}

	.ul .li .ri {
		width: fit-content;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		align-content: space-between;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.ul .li .ri text {
		display: block;
		height: 58rpx;
		line-height: 58rpx;
		background: #b35a50;
		padding: 0 15rpx;
		font-size: 24rpx;
		color: #fff;
		margin-left: 5px;
		border-radius: 10rpx;
	}

	.box {
		width: 500rpx;
		margin: 0 auto;
		background: #fff;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.box .uni-row {
		margin-top: 15rpx;
	}

	.box input {
		border: 1px solid #7a2323;
		height: 66rpx;
		line-height: 66rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #7a2323;
		font-size: 30rpx;
	}

	.box .btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}


	.box .btn button {
		height: 66rpx;
		line-height: 66rpx;
		background: #7a2323;
		font-size: 26rpx;
		text-align: center;
		color: #fff;
	}

	.box .btn button.le {
		background: #ff8272;
	}

	.add_float {
		width: 100rpx;
		height: 100rpx;
		background: #ff8272;
		color: #fff;
		font-size: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
		border-radius: 100rpx;
	}
</style>